<script setup lang="ts">
import { ref } from "vue";
import ControlCamera from "../components/ControlCamera/index.vue";
import LoadModel from "../components/LoadModel/index.vue";
import FlyRoute from "../components/FlyRoute/index.vue";

// interpolation

const COMP_DIC: { [key: string]: any } = {
  ControlCamera,
  LoadModel,
  FlyRoute,
};

const flyType = ref("ControlCamera");
</script>

<template>
  <main class="main-wrap">
    <keep-alive>
      <component :is="COMP_DIC[flyType]" />
    </keep-alive>
  </main>

  <ul class="ul-wrap">
    <li
      @click="flyType = 'ControlCamera'"
      :class="{ active: flyType === 'ControlCamera' }"
    >
      自由控制
    </li>
    <li
      @click="flyType = 'FlyRoute'"
      :class="{ active: flyType === 'FlyRoute' }"
    >
      路线行进
    </li>
    <li
      @click="flyType = 'LoadModel'"
      :class="{ active: flyType === 'LoadModel' }"
    >
      自动行进
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.header-wrap {
  height: 64px;
  display: flex;
  gap: 8px;

  .logo {
    width: 16px;
    height: 16px;
  }
}

.main-wrap {
  height: 100%;
}

.ul-wrap {
  list-style: none;
  position: absolute;
  top: 16px;
  left: 16px;
  border: 2px solid #23d476;
  border-radius: 4px;
  overflow: hidden;
  background: #23d47660;
  color: #fff;
  display: flex;

  & > li {
    padding: 8px;

    &:hover {
      background: #23d476;
      cursor: pointer;
    }
  }

  & > li {
    border-right: 2px solid #0fc363;
  }

  & > li:last-of-type {
    border-right: none;
  }

  .active {
    background: #0fc363 !important;
  }
}
</style>
